<template>
  <div class="wrap">
    <el-form label-position="top" :model="ruleForm" :rules="rules" label-width="120px" class="sn-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="SN" prop="serialNum">
            <el-input v-model="ruleForm.serialNum"></el-input>
          </el-form-item>
          <el-form-item label="服务编码" prop="serviceCode">
            <el-input v-model="ruleForm.serviceCode"></el-input>
          </el-form-item>
          <el-form-item label="客户名称" prop="clientName">
            <el-input v-model="ruleForm.clientName"></el-input>
          </el-form-item>
          <el-form-item label="电子邮件" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="快递联系人" prop="contactor">
            <el-input v-model="ruleForm.contactor"></el-input>
          </el-form-item>
          <el-form-item label="联系人电话" prop="phoneNum">
            <el-input v-model="ruleForm.phoneNum"></el-input>
          </el-form-item>
          <el-form-item label="快递地址邮编" prop="postcode">
            <el-input v-model="ruleForm.postcode"></el-input>
          </el-form-item>
          <el-form-item label="快递地址" prop="adress">
            <el-input v-model="ruleForm.adress"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <div class="button-group">
      <el-button type="primary" @click="generate">生成激活文件</el-button>
    </div>
  </div>

</template>

<script>
  export default {
    data(){
      return{
        ruleForm: {
          serialNum: '',
          serviceCode: '',
          clientName: '',
          email: '',
          contactor: '',
          phoneNum: '',
          postcode: '',
          adress: ''
        },
        rules: {
          serialNum: [
            { required: true, message: '请输入SN序列号', trigger: 'blur' }
          ],
          serviceCode: [
            { required: true, message: '请输入服务编码', trigger: 'blur' }
          ],
          clientName: [
            { required: true, message: '请输入客户名称', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' }
          ],
          contactor: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
          ],
          phoneNum: [
            { required: true, message: '请输入联系人电话', trigger: 'blur' }
          ],
          postcode: [
            { required: true, message: '请输入邮编', trigger: 'blur' }
          ],
          adress: [
            { required: true, message: '请输入快递地址', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      generate(){
        this.$message({
          message: '激活文件已生成',
          type: 'success'
        });
      }
    }
  }
</script>

<style lang="scss">
  .wrap{
    margin-left: 20px;
    margin-right: 20px;
    .sn-form{
      // width: 90%;
      // min-width: 200px;
      .el-form-item__label{
        font-weight: bold;
      }
      .el-input__inner{
        border-radius: 0px;
        border-top: none;
        border-left: none;
        border-right: none;
        // border-bottom: 2px solid rgb(122, 122, 122);
      }
    }
    .button-group{
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
